<template>
  <div class="Tabbar">
    <van-tabbar v-model="active" @change="onChange" class="active_tab">
      <van-tabbar-item to="/monitor" replace>
        <span>监测</span>
        <img slot="icon" slot-scope="props" :src="props.active ? icon.activeMonitor : icon.normalMonitor" />
      </van-tabbar-item>
      <van-tabbar-item to="/info" replace> <span>信息</span> <img slot="icon" slot-scope="props" :src="props.active ? icon.activeInfo : icon.normalInfo"/></van-tabbar-item>

      <van-tabbar-item class="tabbar-control" to="/control" replace
        ><span>控制</span> <img slot="icon" slot-scope="props" :src="props.active ? icon.activeControl : icon.normalControl"
      /></van-tabbar-item>

      <van-tabbar-item to="/supervisoryControl" replace
        ><span>监控</span> <img slot="icon" slot-scope="props" :src="props.active ? icon.activeSupervisoryControl : icon.normalSupervisoryControl"
      /></van-tabbar-item>

      <van-tabbar-item to="/setting" replace><span>设置</span> <img slot="icon" slot-scope="props" :src="props.active ? icon.activeSetting : icon.normalSetting"/></van-tabbar-item>

      <!-- <van-tabbar-item :to="{ path: `${item.path}`}" v-for="(item,index) in tabbar" :key="index">{{item.text}}</van-tabbar-item> -->
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Tabbar',
  props: {
    courrentTabBar: {
      type: String
    }
  },
  data() {
    return {
      active: 0,
      icon: {
        normalMonitor: require('../assets/img/normalMonitor.png'),
        activeMonitor: require('../assets/img/activeMonitor.png'),
        normalInfo: require('../assets/img/normalInfo.png'),
        activeInfo: require('../assets/img/activeInfo.png'),
        normalControl: require('../assets/img/normalControl.png'),
        activeControl: require('../assets/img/activeControl.png'),
        normalSupervisoryControl: require('../assets/img/normalSupervisoryControl.png'),
        activeSupervisoryControl: require('../assets/img/activeSupervisoryControl.png'),
        normalSetting: require('../assets/img/normalSetting.png'),
        activeSetting: require('../assets/img/activeSetting.png')
      }
    }
  },
  created() {},
  methods: {
    onChange(index) {
      // this.active = index
      // console.log(this.active)
      console.log(index)
      if (this.active === 0) {
        this.$router.push({
          path: '/monitor',
          replace: true
        })
      } else if (this.active === 1) {
        this.$router.push({
          path: '/info',
          replace: true
        })
      } else if (this.active === 2) {
        this.$router.push({
          path: '/control',
          replace: true
        })
      } else if (this.active === 3) {
        this.$router.push({
          path: '/supervisoryControl',
          replace: true
        })
      } else if (this.active === 4) {
        this.$router.push({
          path: '/setting',
          replace: true
        })
      }
    }
  },
  mounted() {
    // 判断当前页面是否为home或newpersonal页面
    console.log(window.location.hash)
    const CURRENTTABBAR = window.location.hash.split('/')[1]
    if (CURRENTTABBAR === 'monitor') {
      this.active = 0
    } else if (CURRENTTABBAR === 'info') {
      this.active = 1
    } else if (CURRENTTABBAR === 'control') {
      this.active = 2
    } else if (CURRENTTABBAR === 'supervisoryControl') {
      this.active = 3
    } else if (CURRENTTABBAR === 'setting') {
      this.active = 4
    }
  }
}
</script>

<style lang="less" scoped>
.tabbar-control {
  position: relative;
  top: -2.5rem;
  width: 3rem;
  height: 5rem;
  border: 2px solid #21c2c2;
  border-radius: 50%;
  z-index: 2;
  background: #fff;
}
.van-tabbar-item {
  font-size: 14px;
}
.blue {
  color: #2175bc;
}
.active_tab .router-link-active {
  color: #e10f02;
}
.tabbar-control {
  display: none !important;
}
</style>
